<template>

	<div class="innerpage headspace">
		<Header active="1"></Header>
		<div class="bread">
			<div class="page-inner">
			    <NuxtLink to="/">Home</NuxtLink>><NuxtLink to="/Manufacturers">Database</NuxtLink>><NuxtLink to="/APIs">Active Pharmaceutical
			        Ingredient (API)</NuxtLink>><NuxtLink  :to="'/APIs/'+ApiInfo.id" style="cursor: pointer">{{ApiInfo.ingredient}}</NuxtLink>><span>Toxicity Data</span>
			</div>
			
		</div>
		<div class="detailBox" id="p1">
			<div class="box flex page-inner">
				<div class="col">
					<div class="mliks">
						<div class="mt f24 font-m">Non-clinical Toxicity Data </div>
						<div class="items">
							<div class="i"><a href="#p1">Single Dose Toxicity</a></div>
							<div class="i"><a href="#p2">Repeated Dose Toxicity</a></div>
							<div class="i"><a href="#p3">Carcinogenicity</a></div>
							<div class="i"><a href="#p4">Genotoxicity</a></div>
							<div class="i"><a href="#p5">Reproductive and Developmental Toxicity</a></div>
							<div class="i"><a href="#p6">Local lrritation and Sensitization Potential </a></div>
						</div>
						<div class="mt f24 font-m">Clinical Toxicity Data</div>
						<div class="items">
							<!-- <div class="i"><a href="#p7">Pharmacodynamics data</a></div> -->
							<div class="i"><a href="#p8">Carcinogenicity </a></div>
							<div class="i"><a href="#p9">Reproductive and Developmental Toxicity </a></div>
							<div class="i"><a href="#p10">Local lrritation and Sensitization Potential </a></div>
							<div class="i"><a href="#p11">Genotoxicity</a></div>
						</div>
					</div>
				</div>
				<div class="cor">
					<div class="dt f36 font-m">Non-clinical Toxicity Data</div>
					<div class="dblock">
						<div id="p1" class="pos"></div>
						<div class="bt f24 font-m">Single Dose Toxicity</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route</th>
										<th class="f18 font-m">LD50 value (mg/kg)</th>
									</tr>
									<tr v-for="(item,index) in dataInfo.acute_toxicity_studies" :key="index">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.ld50_value}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p2" class="pos"></div>
						<div class="bt f24 font-m">Repeated Dose Toxicity</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route</th>
										<th class="f18 font-m">Doses </th>
										<th class="f18 font-m">Duratioin </th>
										<th class="f18 font-m">Key Findings</th>
									</tr>
									<tr v-for="(item,index) in dataInfo.repeated_dose_toxicity_studies" :key="index">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
									</tr>
									
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p3" class="pos"></div>
						<div class="bt f24 font-m">Carcinogenicity</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route</th>
										<th class="f18 font-m">Doses </th>
										<th class="f18 font-m">Duratioin </th>
										<th class="f18 font-m">Key Findings</th>
									</tr>
									<tr v-for="(item,index) in dataInfo.carcinogenicity_studies" :key="index">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
									</tr>
									
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p4" class="pos"></div>
						<div class="bt f24 font-m">Genotoxicity</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Test/Assay </th>
										<th class="f18 font-m">Cell lines/Organism </th>
										<th class="f18 font-m">Concentration/Dose </th>
										<th class="f18 font-m">Findings </th>
										<th class="f18 font-m">Note </th>
									</tr>
									<tr v-for="(item,index) in dataInfo.genotoxicity_studies" :key="index">
										<td>{{item.test_assay}}</td>
										<td>{{item.cell_lines_organism}}</td>
										<td>{{item.concentration_dose}}</td>
										<td>{{item.findings}}</td>
										<td>{{item.note}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p5" class="pos"></div>
						<div class="bt f24 font-m">Reproductive and Developmental Toxicity</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route </th>
										<th class="f18 font-m">Doses(mg/kg/day) </th>
										<th class="f18 font-m">Duratioin </th>
										<th class="f18 font-m">Key Findings </th>
									</tr>
									<tr>
										<td class="f18 font-m" colspan="5"
											style="background: #f5f5f5;text-align: center;color: #242424;padding: 10px;">
											Reproductive/continuous breeding study
										</td>
									</tr>
									
									<tr  v-for="(item,index) in dataInfo.reproductive_and_developmental_studies" :key="index">
										<template v-if="item.title=='Reproductive/continuous breeding study'">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
										</template>
									</tr>
									
									<tr>
										<td class="f18 font-m" colspan="5"
											style="background: #f5f5f5;text-align: center;color: #242424;padding: 10px;">
											Male reproductive function study
										</td>
									</tr>
									<tr v-for="(item,index) in dataInfo.reproductive_and_developmental_studies" :key="index">
										<template v-if="item.title=='Male reproductive function study'">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
										</template>
									</tr>
									<tr>
										<td class="f18 font-m" colspan="5"
											style="background: #f5f5f5;text-align: center;color: #242424;padding: 10px;">
											Embryotoxicity study
										</td>
									</tr>
									<tr v-for="(item,index) in dataInfo.reproductive_and_developmental_studies" :key="index">
										<template v-if="item.title=='Embryotoxicity study'">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
										</template>
									</tr>
									<tr>
										<td class="f18 font-m" colspan="5"
											style="background: #f5f5f5;text-align: center;color: #242424;padding: 10px;">
											Embryotoxicity study (effects on maternal and fetal liver and kidney were
											investigated)
										</td>
									</tr>
									<tr v-for="(item,index) in dataInfo.reproductive_and_developmental_studies" :key="index">
										<template v-if="item.title=='Embryotoxicity study (effects on maternal and fetal liver and kidney were investigated)'">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
										</template>
									</tr>
								</tbody>
							</table>
							<br>
							<p> <b>*Pregnancy category C:</b> There are no adequate and well controlled studies in
								pregnant women.however,epidemiological data on oral acetaminophen use in pregnant women
								show no increased risk of major congenital malformations (7).
							</p>
						</div>
					</div>
					<div class="dblock" v-if="otherInfo">
						<div id="p6" class="pos"></div>
						<div class="bt f24 font-m">Local lrritation and Sensitization Potential </div>
						<div class="btxt f16" v-html="otherInfo.highly_sensitizing_potential"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="detailBox gray" v-if="otherInfo">
			<div class="box flex page-inner">
				<div class="col"></div>
				<div class="cor">
					<div class="dt f36 font-m">Clinical Toxicity Data</div>
					<!-- <div class="dblock">
						<div id="p7" class="pos"></div>
						<div class="bt f24 font-m">Pharmacodynamics data</div>
						<div class="btxt f16" v-html="otherInfo.pharmacodynamics_data"></div>
					</div> -->
					<div class="dblock">
						<div id="p8" class="pos"></div>
						<div class="bt f24 font-m">Carcinogenicity </div>
						<div class="btxt f16" v-html="otherInfo.carcinogenicity">

						</div>
					</div>
					<div class="dblock">
						<div id="p9" class="pos"></div>
						<div class="bt f24 font-m">Reproductive and Developmental Toxicity </div>
						<div class="btxt f16" v-html="otherInfo.reproductive_and_developmental_toxicity"></div>
					</div>
					<div class="dblock">
						<div id="p10" class="pos"></div>
						<div class="bt f24 font-m">Local lrritation and Sensitization Potential </div>
						<div class="btxt f16" v-html="otherInfo.local_irritation_and_sensitization_potential"></div>
					</div>
					<div class="dblock">
						<div id="p11" class="pos"></div>
						<div class="bt f24 font-m">Genotoxicity</div>
						<div class="btxt f16" v-html="otherInfo.genotoxicity"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		toxicity,apiInfo
	} from '@/api/sections'

	import {
		ElMessageBox
	} from 'element-plus'
	export default {
		async setup() {
			const route = useRoute();
			const info = {
				name: 'Paracetamol (Oral)',
				IUPACName: ''
			};
			const state = useState('global_userInfo');
			return {
				info,
				state
			}
		},
		data() {
			return {
				dataInfo: {},
				ApiInfo:{},
				otherInfo:{}
			}
		},
		methods: {
			hasPermision: function(id) {
				const that = this;
				return that.state.permission.includes(id) || false;
			}
		},
		computed: {

		},
		mounted: function() {
			var that = this;
			that.$nextTick(function() {
				
				if (localStorage.getItem("userinfo")) {
					that.token = JSON.parse(localStorage.getItem("userinfo")).token;
				};
				apiInfo({
					'id': that.$route.query.id,
					token: that.token,
				}).then((res) => {
					that.ApiInfo=res.data
				})
				toxicity({
					'apiid': that.$route.query.id,
				}).then((res) => {
					that.dataInfo = res.data
					that.otherInfo= res.data.clinical_toxicity_data
					// if(res.data.toxicity_data && res.data.toxicity_data.length>0){
					// 	that.otherInfo=res.data.toxicity_data[0]
					// }
				})

				$(".toggleML").each(function() {
					var btn = $(this).find('.zk');
					var short = $(this).find('.span');
					var info = $(this).find('.hid');
					var line = $(this).find('.p');
					short.text(info.text().substr(0, 120) + '...');
					btn.click(function() {
						if ($(this).hasClass('act')) {
							$(this).removeClass('act');
							line.removeClass('act');
							short.text(info.text().substr(0, 120) + '...');
						} else {
							$(this).addClass('act');
							line.addClass('act');
							short.html(info.html());
						}
					});
				});

			})
		}
	}
</script>